<!--
 * @Author: Shiire
 * @Date: 2022-08-21 01:55:58
 * @LastEditors: Shiire
 * @LastEditTime: 2022-08-21 22:47:43
 * @Description: 
 * @FilePath: \grapro\src\components\VideoCart\index.vue
-->
<template>
  <div class="video-cart" :style="{ width }" data-v-videocart>
    <el-skeleton :loading="loading" animated>
      <!-- 骨架屏 -->
      <template slot="template">
        <el-skeleton-item variant="image" class="cover" :style="{ height }" />
        <div class="info">
          <div
            class="title"
            style="align-items: flex-start; flex-direction: column"
          >
            <el-skeleton-item variant="h3" style="height: 1.2rem" />
            <el-skeleton-item
              variant="h3"
              style="width: 80%; height: 1.2rem; margin-top: 0.2rem"
            />
          </div>
          <div class="nav-list">
            <el-skeleton-item variant="text" style="width: 30%; height: 1rem" />
            <el-skeleton-item variant="text" style="width: 50%; height: 1rem" />
          </div>
        </div>
      </template>
      <template> </template>
      <header>
        <div class="cover" :style="{ height }">
          <div class="cover-inner" @click="toVideoDetails(videoObj.id)">
            <img :ref="videoObj.id" alt="" />
          </div>
        </div>
      </header>
      <footer>
        <div class="info">
          <div class="title">
            <h2>
              {{ videoObj.title }}
            </h2>
          </div>
          <div class="nav-list">
            <span class="username" @click="toHomePage(videoObj.video_issuer)">{{
              videoObj.username
            }}</span>
            <span class="el-icon-date nav-list-date">{{ videoObj.date }}</span>
          </div>
        </div>
      </footer>
    </el-skeleton>
  </div>
</template>

<script>
export default {
  name: "VideoCart",
  props: {
    videoObj: {
      type: Object,
      required: true,
    },

    width: {
      type: String,
      default: "320px",
    },

    height: {
      type: String,
      default: "200px",
    },
  },

  data: function () {
    return {
      isShow: false,
      loading: true,
      src: "",
    };
  },

  watch: {
    isShow: function (newQuestion, oldQuestion) {
      // 出现在视口时加载图片
      if (newQuestion) {
        this.loadImgAsync(this.videoObj.src)
          .then((data) => {
            this.loading = false;
            this.$nextTick(() => {
              this.$refs[this.videoObj.id].src = data.src;
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },

  created() {},

  mounted() {},

  methods: {
    loadImgAsync(url) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;

        if (img.complete) {
          return resolve({
            status: "complete",
            src: img.src,
          });
        }

        img.onload = () => {
          resolve({
            status: "onload",
            src: img.src,
          });
        };

        img.onerror = () => {
          reject(new Error("image is 404"));
        };
      });
    },

    toVideoDetails(id) {
      const res = this.$router.resolve(`/video/${id}`);
      window.open(res.href, "_blank");
    },

    toHomePage(id) {
      const res = this.$router.resolve(`/homepage/${id}`);
      window.open(res.href, "_blank");
    },
  },
};
</script>

<style lang="scss">
.video-cart[data-v-videocart] {
  //   width: 320px;
  background-color: #fefeff;

  .cover {
    // height: 200px;
    border-radius: 0.6rem;
    overflow: hidden;
    cursor: pointer;

    .cover-inner {
      height: 100%;
      border-radius: 0.6rem;
      transition: transform 0.3s;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.6rem;
      }

      &:hover {
        transform: scale(1.15);
      }
    }
  }

  .info {
    height: 12vh;
    padding: 0.6rem;

    .title {
      display: flex;
      align-items: flex-start;
      height: 70%;

      h2 {
        display: -webkit-box;
        font-size: 2vh;
        font-weight: 400;
        color: #333;
        letter-spacing: 2px;
        -webkit-box-orient: vertical;
        text-overflow: -o-ellipsis-lastline;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    .nav-list {
      height: 30%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 1.6vh;
        color: #8f8f8f;
      }

      .username {
        cursor: pointer;

        &:hover {
          color: #fb5430;
        }
      }

      .nav-list-date::before {
        margin-right: 0.6rem;
      }
    }
  }
}
</style>